<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <!--<div class="search-block">-->
                <!--<Input v-model="value" class="input-search" placeholder="根据时间查询" style="width: 200px"></Input>-->
                <!--<Input v-model="value" class="input-search" placeholder="根据编队查找" style="width: 200px"></Input>-->
                <!--<Input v-model="value" class="input-search" placeholder="根据时间查找" style="width: 200px"></Input>-->
                <!--<Input v-model="value" class="input-search" placeholder="根据证件号查找" style="width: 200px"></Input>-->
                <!--<Button type="ghost" icon="ios-search">搜索</Button>-->
            <!--</div>-->
            <!--<Button type="error" @click="jumpPage(visitorId,'VisitorCarAdd')">添加</Button>-->
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                visitorId:'',
                tableColumns: [
                    {
                        title: '车辆车牌号',
                        key: 'CarCode',
                        align: 'center',
                    },
                    {
                        title: '访客性别',
                        key: 'VisitorSex',
                        align: 'center',
                    },
                    {
                        title: '访客电话',
                        key: 'VisitorPhone',
                        align: 'center',
                    },
                    {
                        title: '访客人数',
                        key: 'VisitorCount',
                        align: 'center',
                    },
                    {
                        title: '访客证件',
                        key: 'VisitorCertAndType',
                        align: 'center',
                    },
                    {
                        title: '访问原因',
                        key: 'Reason',
                        align: 'center',
                    },
                    {
                        title: '被访问人',
                        key: 'DescPeopleName',
                        align: 'center',
                    },
                    {
                        title: '被访问人部门',
                        key: 'DescPeopleDept',
                        align: 'center',
                    },
                    {
                        title: '被访问电话',
                        key: 'DescPeoplePhone',
                        align: 'center',
                    },
                    {
                        title: '登记时间',
                        key: 'VisitDate',
                        align: 'center',
                    },
                    {
                        title: '状态',
                        key: 'CurState',
                        align: 'center',
                    },
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.visitorId =this.$route.query.id;
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {
                    curPage: this.current,
                    pageSize: 10,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.VisitorCarList, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;

                });

            },
            remove(id) {
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除该车辆记录`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            id:id,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DeleteVisitorCar, para, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            }
        },
    }
</script>